<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>发布房源</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入YDUI样式 -->
    <link rel="stylesheet" href="../build/css/ydui.css" />
	  <link rel="stylesheet" href="../css/common.css" />
    <!-- 引入YDUI自适应解决方案类库 -->
	<style>
		input,textarea{
			font-family: initial;
		}
		#data-form {
			padding:.2rem;
		}
		#data-form div{
			display: flex;
			align-items: center;
			padding: .3rem 0;
			
		}
		#data-form div label{
			display: inline-block;
			min-width: 1.8rem;
			color: #868686;
			font-size: .3rem;
			text-align: right;
			padding: 0 .3rem 0 0 ;
		}
		#data-form div input{
			text-align: right;
			border-radius: .1rem;
			width: 100%;
			border: 0;
			background: #EEEEEE;
			padding: .2rem;
			height: .7rem !important;
			font-size: 0.3rem;
			
		}
		textarea{
			border-radius: .1rem;
			width: 100%;
			border: 0;
			background: #EEEEEE;
			padding: .2rem;
			font-size: 0.3rem;
		}
		.cell-item:not(:last-child):after{
			border: 0;
		}
		.cell-item{
			margin-left: .5rem;
		}

		.cell-checkbox-icon:after{
			color:#C1060F !important;
		}
		
		.uploadbutton{
			font-size: 0.4rem;
			border: dashed 1px #7F7F7F;
			padding: .2rem .3rem;
		}
		.submit{
			font-size: 0.3rem;
			text-align: center;
			display: block;
			margin: 0 auto;
			border-radius: .2rem;
			background: #C1060F;
			color: #ffffff;
			padding: .2rem .5rem;
			margin-top: .5rem !important;
		}
		#J_ShowActionSheet{
			display: block !important;
			padding: 0 !important;
			height: 7rem;
		}
		
		/* 城市列表自定义布局 */
		#ProviceList, #CityList,#AreaList{
			padding: 0 !important;
			float: left;
			display: block !important;
			height: 5rem;			
			overflow: auto;
			width: 30% !important;
			margin: 0 5px;
			height: 7rem;
		}
		#ProviceList a, #CityList a,#AreaList a{
			line-height: .7rem;
			height: .7rem;
			display: block;
			margin: 1px 0;
			font-size: .23rem;
		}
		.active{
			color:#C1060F;
		}
		
		#houseimglist img {
			width: 1rem;
			height: 1rem;
			margin: .1rem 0 0 .3rem;
		}
		#houseimglist p{
			margin-top: .3rem;
			position: relative;
		}
		.removeimg{
			display: inline-block;
			position: absolute;
			top: -0.1rem;
			right: -0.1rem;
			background: red;
			color: #fff;
			width: .3rem;
			height: .3rem;
			line-height: .25rem;
			text-align: center;
			font-size: .5rem;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<section class="g-flexview">
		<!-- 顶部内容 -->
		<header class="m-navbar">
			<a href="#" onClick="javascript :window.history.back(); return false;" class="navbar-item">
				<i class="back-ico"></i>
			</a>
			<div class="navbar-center">
				<span class="navbar-title">发布二手房源信息</span>
			</div>
		</header>
		<div class="g-scrollview">
		<div id="data-form">
				<div class="">
					<label>选择地区</label>
					<input id="J_ActionSheet" value="" name="currenArea" type="text" readonly="readonly"  placeholder="选择地区" />
					<div class="m-actionsheet" id="J_ShowActionSheet">
						<div id="ProviceList" style="width: 30%;"></div>
						<div id="CityList" style="width: 30%;"></div>	
						<div id="AreaList" style="width: 30%;"></div>								
					</div>
				</div>
				<div class="">
					<label>详细地址</label>
					<input type="text"   value=""  name="adressname" placeholder="街道、门牌号..." />
				</div>
				<div class="">
					<label>房源名称</label>
					<input type="text"  placeholder="房源名称" value="" name="housename" />
				</div>
				<div class="">
					<label>价格</label>
					<input type="text"  placeholder="房源价格" value="" name="houseprice" />
				</div>
				<div class="">
					<label>面积</label>
					<input type="text"  placeholder="房源面积/㎡" value="" name="houses" />
				</div>
				<div class="">
					<label>户型</label>
					<input type="text"  placeholder="如:三室一厅一厨一卫..." value="" name="housestyle" />
				</div>
				<div class="">
					<label>物业费</label>
					<input value="" name="wuyefei" type="text"   placeholder="元/㎡" />
				</div>
				<div class="">
					<label>装修类型</label>
					<input value="" name="zhuangxiu" type="text"   placeholder="如:毛坯、精装" />
				</div>
				<div class="">
					<label>房源图片</label>
					<div class="logo-wrapper">
						<span class="uploadbutton" onclick="$('#sfz_1').click()">+</span>
						<input type="file" multiple accept="image/*"  class="ajax-upload" accept="image/gif,image/jpeg,image/x-png" name="file[]"   id="sfz_1"  style="display:none">
					</div>					
				</div>
				<div class="imgitem-list" id="houseimglist" style="flex-wrap: wrap; padding: 0;"></div>
				<div class="">
					<label>房源介绍</label>
					<textarea class="desc" rows="10" cols="50" placeholder="房源介绍信息"></textarea>
				</div>
				<span id="releasenow" class="submit">立即发布</span>																	
		</div>
		</div>
		</section>
<!-- 引入jQuery 3.0+ -->
<script src="../js/jq331.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="../build/js/ydui.js"></script>
<script src="../build/js/ydui.flexible.js"></script>
<script src="../js/template.js"></script>
<script src="../js/common.js"></script>
<script id="prolistscript" type="text/html">
	{{each data as value index}}
		<a href="#" onclick="proviceclick(this,{{data[index].province_id}},'{{data[index].name}}')" class="actionsheet-item" data-code="{{data[index].province_id}}">{{data[index].name}}</a>
	{{/each}}
</script>

<script id="citylistscript" type="text/html">
	{{each citylist as value index}}
		<a href="#" onclick="cityclick(this,{{citylist[index].city_id}},'{{citylist[index].name}}')"  class="actionsheet-item" data-code="{{citylist[index].city_id}}">{{citylist[index].name}}</a>
	{{/each}}
</script>

<script id="arealistscript" type="text/html">
	{{each arealist as value index}}
		<a href="#" onclick="areaclick(this,{{arealist[index]._id}},'{{arealist[index].name}}')"   class="actionsheet-item" data-code="{{arealist[index].area_id}}">{{arealist[index].name}}</a>
	{{/each}}
</script>

<!-- 多图上传 -->
<script id="uiploadimages" type="text/html">
	{{each imglist as value index}}
		<p><img data-id="{{imglist[index].id}}" src= "{{imglist[index].src}}" /><span onclick="removeimg(this)" class="removeimg">-</span></p>
	{{/each}}
</script>

<script>
	//多图上传图片id集合
	var imgidlist = [];
	$(document).ready(function(){		
		if(!dataToken){
			!function (win, $) {
				var dialog = win.YDUI.dialog;													
				dialog.confirm('系统提示', '您还没有登录，现在去登录...', [
					{
						txt: '取消',
						color: false, /* false:黑色  true:绿色 或 使用颜色值 */
						callback: function () {
							history.go(-1);
						}
					},
					{
						txt: '确定',
						color: true,
						callback: function () {
							location.href="./login.html";
						}
					}
				]);
			}(window, jQuery);					
			return;
		}
		//token判断时效，超时退出登录
		var _interval_handler=-1;
		
		var _EXPIRE_TIME = datamoretime;//判断时效时间，则注销
		(function () {
			if (dataToken) {//已登录
			//刷新最后使用时间
			localStorage.setItem("nxgx_lastVisitTime", new Date().getTime());
			_interval_handler=setInterval(checkExpired, 10*1000);//10秒钟检查一次，是否超时
			
			//在登录的状态下检测用户是否提交验证资料并且审核通过
			var checkApi = commapi + 'yanzheng/shenhe';
			$.ajax({
			url: checkApi,
			type: 'POST',
			data: {},
			beforeSend: function(request) {
					request.setRequestHeader("token", dataToken);
					},
			success: function (ret) {
					console.log(ret);
					if(ret.is_examine != 1){												
						!function (win, $) {
							var dialog = win.YDUI.dialog;						
								dialog.toast('您的验证资料尚未通过审核，还不能发布房源信息！', 'none', 2000);
								setTimeout(function () {
									dialog.loading.close();/* 移除loading */
									location.href="./checking.html"
								}, 2000);					  	
						}(window, jQuery);	
					};
					if(ret.is_examine == 1){
						YDUI.dialog.toast('恭喜您已经通过审核验证，可以发布房源信息啦！', 'none', 2000);
					}
				},              
			}); 
			
			
			}
		})();
		
		function checkExpired() {
		//console.log("10秒检查一次是否过期"+window.location.href+"::"+new Date());
		var storeLastTime=localStorage.getItem("nxgx_lastVisitTime")?localStorage.getItem("nxgx_lastVisitTime"):-1;
		if (storeLastTime==-1) clearInterval(_interval_handler);
		else {
				if ((new Date()).getTime()-storeLastTime>_EXPIRE_TIME) {  //过期了
				!function (win, $) {
					var dialog = win.YDUI.dialog;
					/* 加载中提示框 */									
						dialog.loading.open('登录超时...');
						setTimeout(function () {
							dialog.loading.close();/* 移除loading */
							location.href="./login.html";
						}, 2000);
				
				}(window, jQuery);	
				clearInterval(_interval_handler);
			}
			}
		};
		
		//点击 选择楼盘
		var $as = $('#J_ShowActionSheet');					
		$('#J_ActionSheet').on('click', function () {
			var provicelistApi = commapi + 'province/list'; //获取省份				
			$as.actionSheet('open'); //打开楼盘城市列表
			$('#CityList').html(''); //清空市内容
			$.ajax({
			url: provicelistApi,
			type: 'GET',
			data: {},             				
			success: function (list) {
					console.log(list);
					var html = template('prolistscript', {data: list});
					$('#ProviceList').html(html);
					$('#AreaList').html('');
				},              
			}); 
		});							
				
			//发布房源图片
				$('.ajax-upload').on('change',function(){
						 var uploadimgApi = commapi + 'upload/file_imgs';
						 var formData = new FormData();						 
						 for(var i=0; i < $("#sfz_1")[0].files.length; i++){
								 formData.append('files[]', $("#sfz_1")[0].files[i]);
						 }
						 $.ajax({
								url: uploadimgApi,
								type: "POST",
								processData: false,
								contentType: false,
								data: formData,
								beforeSend: function(request) {
											request.setRequestHeader("token", dataToken);
										},
								success: function(data){
									console.log(data)
									var html = template('uiploadimages', {imglist: data.img_data});
									$('#houseimglist').append(html);
									if(imgidlist==''){
										imgidlist = data.room_map.split(",");//将第一次选中的图片id集合在一个数组,
										console.log(000)
									}else{										
										newimgidlist = data.room_map.split(",");
										imgidlist = imgidlist.concat(newimgidlist); //将后续增加的图片id合并
									} 
									console.log(imgidlist);
								}
						 });
				});					
			});
	
		//删除数组指定的某个元素  封装一个 remove 函数
			Array.prototype.indexOf = function(val) {
					for (var i = 0; i < this.length; i++) {
					if (this[i] == val) return i;
					}
					return -1;
			};
			Array.prototype.remove = function(val) {
					var index = this.indexOf(val);
					if (index > -1) {
					this.splice(index, 1);
					}
			};
	
			//移除图片
			function removeimg (e){		
				//删除其中一张图片的时候,把imgidlist里面对应的id也删除
				var removeID = $(e).siblings().data('id'); //当前图的id
				imgidlist.remove(removeID) //将删除的图片对应的id也删除		
				console.log(imgidlist);
				$(e).siblings().remove();  $(e).remove();	
			}
	
	//省市区三级联动
	var provicevalue;
	var cityvalue;
	var areavalue;
	var proCode = '';
	var cityCode= '';
	var areaCode = '';
	function proviceclick (e,provicecode,proname){
		var citylistApi = commapi + 'city/list'; //获取市
			$('#AreaList').html(''); //清空市内容
			console.log(provicecode)
			$.ajax({
			url: citylistApi,
			type: 'GET',
			data: {'pid': provicecode},             				
			success: function (citylist) {
					console.log(citylist);
					var html = template('citylistscript', {citylist: citylist});
					$('#CityList').html(html);
				},              
			}); 
				provicevalue = proname;
				proCode = provicecode;
				$('#ProviceList a').removeClass('active'); //高亮显示
				e.classList.add("active");
		};				
	function cityclick (e,citycode,cityname){
		var arealistApi = commapi + 'area/list'; //获取区			
			console.log(citycode)
			$.ajax({
			url: arealistApi,
			type: 'GET',
			data: {'cid': citycode},             				
			success: function (arealist) {
					console.log(arealist);
					var html = template('arealistscript', {arealist: arealist});
					$('#AreaList').html(html);
				},              
			}); 
			cityvalue = cityname;
			cityCode = citycode;
			$('#CityList a').removeClass('active'); //高亮显示
			e.classList.add("active");
		};			
	function areaclick (e,areacode,areaname){
		console.log(areacode);
		$('#J_ShowActionSheet').actionSheet('close');
		$("input[name='currenArea']").val(provicevalue + ' ' + cityvalue+ ' ' + areaname);
		areaCode = areacode;		
		console.log(proCode + '-' + cityCode + '-' + areaCode);
	}
	
	//发布房源信息
	var releasehouseApi = commapi + 'house/add_used'; //发布房源接口
	$('#releasenow').click(function(){
		imgidlist = imgidlist.join(',');	
		console.log(imgidlist)
		var datalist = {
			'title': $('input[name="housename"]').val(),
			'house_price': $('input[name="houseprice"]').val(),
			'floor_area': $('input[name="houses"]').val(),
			'property_costs': $('input[name="wuyefei"]').val(),
			'decoration_type': $('input[name="zhuangxiu"]').val(),
			'house_type': $('input[name="housestyle"]').val(),
			'province': proCode,
			'city': cityCode,
			'area': areaCode,
			'house_address': $('input[name="adressname"]').val(),
			'room_map': imgidlist,
			'detail':  $('.desc').val()
		}	
		$.ajax({
		url: releasehouseApi,
		type: 'POST',
		data: datalist,
		beforeSend: function(request) {
				request.setRequestHeader("token", dataToken);
		},
		success: function (ret) {
				console.log(ret);
				YDUI.dialog.toast('发布成功,正在审核···', 'none', 3000);
				setTimeout(function () {					
					location.href="../index.html" ;
				}, 3000);
			},
		  error:function(msg){
			var json=JSON.parse(msg.responseText);
			YDUI.dialog.toast(json.msg, 'none', 1500); // 失败返回
		  }
		}); 	
		
	});						
</script>

</body>
</html>